<script lang="ts" setup>
import { ref, computed } from "vue";

const isPrimaryBackground = ref(true);
// 计算属性，用于返回动态的背景样式
const backgroundStyle = computed(() => {
  return {
    backgroundColor: isPrimaryBackground.value ? "red" : "blue",
  };
});

function toggleBackground() {
  isPrimaryBackground.value = !isPrimaryBackground.value;
}
</script>
<template>
  <div class="content" :style="backgroundStyle">Hello World</div>
  <button @click="toggleBackground">切换背景</button>
</template>
<style scoped>
.content {
  width: 200px;
  margin: 20px auto;
  line-height: 100px;
  text-align: center;
}
</style>
